<template>
    <el-dialog
        v-model="visible"
        :title="props.appDialog.title"
        :width="props.appDialog.width"
        :before-close="handleClose">
        <template #title>
            <div class="title-wrap">
                {{ props.appDialog.title }}
                <div class="conflict_type">
                    {{ props.conflictType == 2 ? '店铺初始化' : props.conflictType == 3 ? '换绑' : '' }}
                </div>
            </div>
        </template>
        <div class="conflictContent">
            <div v-if="model.origin_member_info" class="conflictContentHeader">
                当前会员 <span class="member_name">{{ model.origin_member_info.nickname || '--' }} </span> 与会员
                <span class="member_name">{{ model.conflict_member_info.nickname || '--' }} </span> 在 有赞{{
                    props.conflictType == 2 ? ' 店铺初始化' : props.conflictType == 3 ? ' 换绑' : ''
                }}时产生了冲突，需手动处理。
            </div>
            <el-form ref="formRef" :model="model" :rules="rules" :inline="false">
                <el-form-item label="处理方式">
                    <el-radio-group v-model="conflictScene" @change="handleChangeConflict">
                        <el-radio :label="1">
                            <div class="conflictFormItem">
                                换绑
                                <el-tooltip effect="light" :content="tipsContent()" placement="top">
                                    <img class="yzMemberPassTips" src="@/assets/ecommerce/yz_member_pass_tips.png" />
                                </el-tooltip>
                            </div>
                        </el-radio>
                        <el-radio v-if="props.conflictType != 2" :label="2">
                            整体换绑
                            <el-tooltip
                                effect="light"
                                content="换绑所有店铺会员，将原店铺会员、积分、成长值、订单信息全部转移"
                                placement="top">
                                <img class="yzMemberPassTips" src="@/assets/ecommerce/yz_member_pass_tips.png" />
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="">
                    <div class="conflictFormItemContentNote">
                        说明：积分成长值变动为预览，仅供参考，实际以处理结果为准
                    </div>
                </el-form-item>
                <el-form-item v-if="model.origin_member_info" label=" ">
                    <div class="conflictFormItemContent">
                        <div class="conflictFormItemContentLeft conflictFormItemContentItem">
                            <div class="conflictHander">
                                <div class="conflictAvatar">
                                    <img :src="comMenberAvatar(model.origin_member_info.avatar)" alt="" srcset="" />
                                </div>
                                <div class="conflictNameMobile">
                                    <div class="name">
                                        <div>{{ model.origin_member_info.nickname || '--' }}</div>
                                        <span>（当前会员）</span>
                                    </div>
                                    <div class="mobile">{{ model.origin_member_info.mobile || '--' }}</div>
                                </div>
                            </div>
                            <div class="conflictFormItemIntegral">
                                积分：
                                <span class="horizontal">{{ model.origin_member_info.points || '0' }}</span> ->
                                {{
                                    comMenberStoreNum(
                                        model.origin_member_info.points,
                                        model.origin_member_info.change_points
                                    )
                                }}
                                <span>（{{ comMemberStoreText(1) }}</span>
                                <span>{{ Math.abs(model.origin_member_info.change_points) || '0' }}）</span>
                            </div>
                            <div class="conflictFormItemGrowth">
                                成长值：
                                <span class="horizontal">{{ model.origin_member_info.experience || '0' }}</span> ->
                                {{
                                    comMenberStoreNum(
                                        model.origin_member_info.experience,
                                        model.origin_member_info.change_experience
                                    )
                                }}
                                <span>（{{ comMemberStoreText(2) }}</span>
                                <span>{{ Math.abs(model.origin_member_info.change_experience) || '0' }}）</span>
                            </div>
                            <div class="conflictFormItemContentLeftStore">
                                <div class="line"></div>
                                <div class="conflictFormItemContentLeftStoreItem">
                                    <div
                                        v-for="store in model.origin_member_info.shop_member_info"
                                        :key="store.id"
                                        class="storeItem">
                                        <img :src="store.source_logo || storeIcon" alt="" />
                                        <div class="storeItemRight">
                                            <div class="name">{{ store.retail_shop_name || '--' }}</div>
                                            <div class="id">ID：{{ store.external_user_id || '--' }}</div>
                                        </div>
                                        <div
                                            class="storeItemType"
                                            :style="{ color: store.scene == 1 ? '#60B900' : '' }">
                                            {{ sceneComputed(store.scene) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="conflictFormItemContentCenter">
                            <img src="@/assets/ecommerce/right.png" />
                        </div>

                        <div
                            v-if="model.conflict_member_info"
                            class="conflictFormItemContentLeft conflictFormItemContentRight conflictFormItemContentItem">
                            <div class="conflictHander">
                                <div class="conflictAvatar">
                                    <img :src="comMenberAvatar(model.conflict_member_info.avatar)" alt="" srcset="" />
                                </div>
                                <div class="conflictNameMobile">
                                    <div class="name">
                                        <div>{{ model.conflict_member_info.nickname || '--' }}</div>
                                        <span style="color: #f53f3f">（有赞会员）</span>
                                    </div>
                                    <div class="mobile">{{ model.conflict_member_info.mobile || '0' }}</div>
                                </div>
                            </div>
                            <div class="conflictFormItemIntegral">
                                积分：
                                <span class="horizontal">{{ model.conflict_member_info.points || '0' }}</span> ->
                                {{
                                    comMenberStoreNum(
                                        model.conflict_member_info.points,
                                        model.conflict_member_info.change_points
                                    )
                                }}
                                <span>（{{ comMemberStoreText(3) }}</span>
                                <span>{{ Math.abs(model.conflict_member_info.change_points) || '0' }}）</span>
                            </div>
                            <div class="conflictFormItemGrowth">
                                成长值：
                                <span class="horizontal">{{ model.conflict_member_info.experience || '0' }}</span> ->
                                {{
                                    comMenberStoreNum(
                                        model.conflict_member_info.experience,
                                        model.conflict_member_info.change_experience
                                    )
                                }}
                                <span>（{{ comMemberStoreText(4) }}</span>
                                <span>{{ Math.abs(model.conflict_member_info.change_experience) || '0' }}）</span>
                            </div>
                            <div class="conflictFormItemContentLeftStore">
                                <div class="line"></div>
                                <div class="conflictFormItemContentLeftStoreItem">
                                    <div
                                        v-for="store in model.conflict_member_info.shop_member_info"
                                        :key="store.id"
                                        class="storeItem">
                                        <img :src="store.source_logo || storeIcon" alt="" />
                                        <div class="storeItemRight">
                                            <div class="name">{{ store.retail_shop_name || '--' }}</div>
                                            <div class="id">ID：{{ store.external_user_id || '--' }}</div>
                                        </div>
                                        <div
                                            class="storeItemType"
                                            :style="{ color: store.scene == 1 ? '#60B900' : '' }">
                                            {{ sceneComputed(store.scene) }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item label=" " prop="setting" required>
                    <el-checkbox-group v-model="model.setting">
                        <el-checkbox label="勾选即同意按当前的账号冲突处理方案执行" name="type" />
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="props.appDialog.cancel">{{ props.appDialog.cancelText }}</el-button>
                <el-button type="primary" :disabled="isDisabledNext" @click="props.appDialog.submit">
                    {{ props.appDialog.submitText }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, ref, reactive, onMounted, computed, watch } from 'vue';
import { memberConflictInfo } from '@/api/member/memberList/index';

import _ from 'lodash';

const emit = defineEmits(['close']);

const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'); // 会员默认头像
const storeIcon = ref('https://static.scrm.keyid.cn/assets/images/web-pc/kyd-logo.jpg'); //店铺默认icon
const conflictScene = ref(1); // 1--换绑，2--整体换绑
const model = reactive({
    conflict_scene: 1, // 1--换绑，2--整体换绑
    setting: [],
    origin_member_info: null,
    conflict_member_info: null
});
const formRef = ref(null);
const rules = reactive({
    setting: [
        {
            required: true,
            message: '请勾选必填项',
            trigger: 'change'
        }
    ]
});

const tipsContent = () => {
    return props.conflictType == 2
        ? '换绑涉及店铺的会员，会员绑定关系以外部系统为准，扣除该涉及店铺相应积分、成长值，扣除值转移给换绑到的会员'
        : '换绑账号，会员绑定关系以外部系统为准，扣除换绑店铺会员相应积分、成长值，扣除值转移给换绑到的会员';
};

/**
 * @description: 会员头像
 * @param {*} val
 * @return {*}
 */
const comMenberAvatar = (val: any) => {
    if (val.includes('wx')) {
        return circleUrl.value;
    } else if (!val) {
        return circleUrl.value;
    } else {
        return val;
    }
};

/**
 * @description: 计算两值之差，如果小于 0 则默认为 0
 * @param {*} val1
 * @param {*} val2
 * @return {*}
 */
const comMenberStoreNum = (val1: any, val2: any) => {
    val1 = Number(val1);
    val2 = Number(val2);
    return Number(val1 + val2 >= 0 ? val1 + val2 : '0').toFixed(0);
};

/**
 * @description: 计算两值之差，小于0则返回‘扣减’，大于0则返回增加
 * @param {*} type
 * @return {*}
 */
const comMemberStoreText = (type: number) => {
    if (type == 1) {
        return model.origin_member_info.change_points > 0 ? '增加' : '扣减';
    } else if (type === 2) {
        return model.origin_member_info.change_experience > 0 ? '增加' : '扣减';
    } else if (type === 3) {
        return model.conflict_member_info.change_points >= 0 ? '增加' : '扣减';
    } else if (type === 4) {
        return model.conflict_member_info.change_experience >= 0 ? '增加' : '扣减';
    }
};

/**
 * @description: 是否禁用确定按钮
 * @return {*} Boolean
 */
const isDisabledNext = computed(() => {
    if (model.setting.length > 0) {
        return false;
    } else {
        return true;
    }
});

/**
 * 店铺场景值
 */
const SCENE = {
    0: '--',
    1: '转入',
    2: '冲突',
    3: '转出'
};

/**
 * @description 计算当前店铺场景类型
 * @param {number} 当前店铺类型
 * @returns 0-空 1-转入 2-冲突 3-转出
 */
const sceneComputed = (val: number) => {
    return SCENE[val];
};

const visible = ref(false); // 是否打开弹框

const props = defineProps<{
    appDialog: object;
    conflictType: string | number;
    member_no: string;
}>();

/**
 * 取消事件
 */
const handleClose = (done: () => void) => {
    props.appDialog.cancel && props.appDialog.cancel();
    done();
    emit('close');
};

/**
 * 切换处理类型
 */

const handleChangeConflict = (val: any) => {
    model.conflict_scene = val;
    getMemberConflictInfo();
};

/**
 * 获取冲突详情
 */
const getMemberConflictInfo = () => {
    memberConflictInfo({
        member_no: props.member_no, // 会员ID
        conflict_scene: conflictScene.value // 解决冲突时的场景
    }).then((res: any) => {
        model['id'] = res['id'];
        model['conflict_type'] = res['conflict_type'];
        model['conflict_scene'] = res['conflict_scene'];
        model['origin_member_info'] = res['origin_member_info'];
        model['conflict_member_info'] = res['conflict_member_info'];
        conflictScene.value = res['conflict_scene'];
    });
};

defineExpose({ conflictScene });

watch(
    () => props.appDialog?.visible,
    val => {
        visible.value = val;
        if (val) getMemberConflictInfo();
    }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.title-wrap {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #33302d;
    .conflict_type {
        height: 24px;
        background: #fff1ed;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        padding: 6px 8px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff6b00;
        margin-left: 6px;
    }
}

.conflictContentHeader {
    margin-bottom: 17px;
    .member_name {
        color: #ff6b00;
    }
}
.conflictContent {
    .conflictFormItem {
        display: flex;
        align-items: center;
    }
    .yzMemberPassTips {
        width: 16px;
        height: 16px;
        margin-left: 4px;
    }

    .conflictFormItemContent {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        overflow-y: auto;
        .conflictFormItemContentItem {
            width: 300px;
            height: 364px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            padding: 16px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .conflictFormItemContentLeft {
            .line {
                width: 100%;
                height: 1px;
                background: #eaeaea;
            }
            .conflictHander {
                display: flex;
                height: 48px;
                margin-bottom: 16px;
                img {
                    width: 48px;
                    height: 48px;
                    margin-right: 8px;
                    border-radius: 50%;
                }

                .conflictNameMobile {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 48px;
                    overflow: hidden;
                    .name {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        height: 24px;
                        span {
                            width: 90px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ff6b00;
                        }
                        display: flex;
                        flex-direction: row;

                        div {
                            height: 24px;
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .mobile {
                        font-size: 14px;
                        font-weight: 400;
                        font-family: PingFangSC-Regular, PingFang SC;
                        color: #585858;
                    }
                }
            }

            .conflictFormItemIntegral,
            .conflictFormItemGrowth {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #585858;
                line-height: 14px;
                margin-bottom: 16px;
                span {
                    font-weight: 500;
                    color: #33302d;
                }
                .horizontal {
                    text-decoration: line-through;
                }
            }
            .conflictFormItemContentLeftStore {
                .conflictFormItemContentLeftStoreItem {
                    height: 64px;
                    .storeItem {
                        height: 64px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        border-bottom: 1px solid #eaeaea;
                        padding: 16px 0;
                        box-sizing: border-box;
                        img {
                            width: 32px;
                            height: 32px;
                            margin-right: 8px;
                            border-radius: 50%;
                        }
                        .storeItemRight {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-around;
                            overflow: hidden;
                            div {
                                line-height: 14px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                            .name {
                                margin-bottom: 6px;
                            }
                        }
                        .storeItemType {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ff6b00;
                        }
                    }
                }
            }
        }
        .conflictFormItemContentCenter {
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 24px;
                height: 24px;
            }
        }
    }

    .conflictFormItemContentNote {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
    }

    :deep(.el-form-item) {
        margin-bottom: 16px;
    }
}
</style>
